﻿{% extends "html/base.html" %}

{% block title %}PersonaCards - Criar persona{% endblock %}

{% block head %}
	<style type="text/css">	
	    .divSeparator {
			border: 1px solid;
			margin: 5px 10px 20px 10px;
		}
		
		.description {
			font-size: 12px;
		}
		.padding {
			padding: 3px 0px;
		}
		.txtSemantica {
			font-size: 12px;
			font-weight: bold;
		}
    </style>
{% endblock %}

{% block body %}
	<h1>Inserir persona</h1>
	<div id="form_container">
		<form id="formCriacaoPersona" class="appnitro" enctype="multipart/form-data" method="post" action="/criarPersona">
			<div id="divDadosBasicos">
				<h2 style="font-size:16px; padding:20px 4px 10px;">Dados básicos</h2>	
				<div class="divSeparator" ></div>
				
				<div class="padding">
					<label class="description"><b>Nome</b></label>
					<br />
					<input id="nome" name="nome" class="element text" maxlength="255" size="30" value=""/>
				</div>
				
				<div class="padding">
					<label class="description"><b>Idade</b></label>
					<br />
					<input id="idade" name="idade" class="element text" maxlength="15" size="2" value=""/>
				</div>
				
				<div class="padding">
					<label class="description"><b>Sexo</b></label>
					<br />
					<select class="element select small" id="element_4" name="sexo">
						<option value="1" selected="selected" >Masculino</option>
						<option value="2">Feminino</option>
			
					</select>
				</div>
				
				<div class="padding">
					<label class="description"><b>Descrição</b></label>
					<br />
					<div>
						<input id="element_5" name="descricao" class="element text large" type="text" maxlength="255" size="50" value=""/> 
					</div>
				</div>
				
				<div class="divCenter">
					<input type="button" value=" Próximo " class="defaultButton" 
						onclick="javascript:proximaEtapa();" />
				</div>
			</div>
			<div id="divSemantica" style="display:none;">
				<h2 style="font-size:16px; padding:20px 4px 10px;">Semântica</h2>	
				<div class="divSeparator" ></div>
				
				<div class="divCenter" >
					<div style="display:inline-table;">
						<table>
							<tr>
								<td>
									<table style="width:100%;">
										<tr>
											<td align="left">
												<div class="txtSemantica" >Ação</div>
											</td>
											<td align="right">
												<div class="txtSemantica">Reflexão</div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
									<input type="range" name="acaoreflexao" min="0" max="20" value="10" step="1" style="width:300px;" />
								</td>
							</tr>
							<tr>
								<td>
									<br />
								</td>
							</tr>
							<tr>
								<td>
									<table style="width:100%;">
										<tr>
											<td align="left">
												<div class="txtSemantica" >Monocromático</div>
											</td>
											<td align="right">
												<div class="txtSemantica">Policromático</div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
									<input type="range" name="monopoli" min="0" max="20" value="10" step="1" style="width:300px;" />
								</td>
							</tr>
							<tr>
								<td>
									<br />
								</td>
							</tr>
							<tr>
								<td>
									<table style="width:100%;">
										<tr>
											<td align="left">
												<div class="txtSemantica" >Coletivo</div>
											</td>
											<td align="right">
												<div class="txtSemantica">Individual</div>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
									<input type="range" name="coleindi" min="0" max="20" value="10" step="1" style="width:300px;" />
								</td>
							</tr>
						</table>
					</div>
				</div>
				
				{% if vincc %}
					<input type="hidden" name="vincc" value="1">
				{% endif %}
				
				<div class="divCenter">
					<input class="defaultButton" type="submit" value="Próximo" />
				</div>
			</div>
		</form>
	</div>
{% endblock %}

{% block jsBlock %}
	<script type="text/javascript" language="javascript">
		function proximaEtapa(){
			var divDadosBasicos = document.getElementById('divDadosBasicos');
			divDadosBasicos.style.display = 'none';
			var divSemantica = document.getElementById('divSemantica');
			divSemantica.style.display = '';
		}
	</script>
	<script type="text/javascript" language="javascript" src="js/html5slider.js">
{% endblock %}
